<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table{
        width:500px;
        margin:200px auto;
        border-collapse:collapse;
        text-align:center;
    }
    td,
    th{
        border:1px solid #333;
    }
    thead tr{
        height:40px;
        background-color:#ccc;
    }
</style>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <td>姓名</td>
                <td>科目</td>
                <td>成绩</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>李四</td>
                <td>js</td>
                <td>58</td>
                <td><a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td>王五</td>
                <td>js</td>
                <td>88</td>
                <td><a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td>张三</td>
                <td>js</td>
                <td>68</td>
                <td><a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td>老刘</td>
                <td>js</td>
                <td>98</td>
                <td><a href="javascript:;">删除</a></td>
            </tr> -->
        </tbody>
    </table>
    <script>
        //模拟动态生成数据
        var object = [{
            name:'张三',
            subject:'js',
            score:44
        },
        {
            name:'李四',
            subject:'js',
            score:99
        },
        {
            name:'王五',
            subject:'js',
            score:77
        },
        {
            name:'老刘',
            subject:'js',
            score:88
        },
        
    ]

    //2、往tbody中添加行，一共有几个人就添加几行
    var body = document.querySelector('tbody');
    //循环遍历有几个人
    for(var i = 0; i < object.length; i++){   //这里的for循环管着有几列
        //1、创建行
        var tr = document.createElement('tr');
        body.appendChild(tr)
        //2、创建单元格，单元格的数量取决于对象有几个属性，通过var k in 对象 可以实现来遍历对象的属性
        for(var k in object[i]){
            //创建单元格
            var td = document.createElement('td');
            //把对象的属性值给ta
            td.innerHTML = object[i][k];
            tr.appendChild(td)
        }
        //3、创建删除的单元格
        var td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">删除</a>'
        tr.appendChild(td)
    }
    //4、删除单元格
    var as = document.querySelectorAll('a');
    for(var i = 0; i < as.length; i++){
        as[i].onclick = function(){
            //删除节点：node.removeChild(child)
            body.removeChild(this.parentNode.parentNode)
        }
    }

    //注意；
    //for(var k in object){
    //     k 代表的是对象的属性；
    //     object[k] 代表的是对象的属性值
    // }

    </script>
</body>

</html>